<template>
  <div class="week-wrap">
    <el-select v-model="year" @change="yearChange" placeholder="请选择" style="width: 100px;">
      <el-option
        v-for="item in yearoptions"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>
    <el-button
      icon="el-icon-arrow-left"
      @click="getLastWeek"
    ></el-button>
    <el-date-picker
      :clearable="false"
      @change="changeWeek"
      v-model="week"
      type="week"
      format="第 WW 周"
      placeholder="选择周"
      :picker-options="pickeroptions"
      style="width: 120px"
    ></el-date-picker>
    <el-button
      icon="el-icon-arrow-right"
      @click="getNextWeek"
    >
    </el-button>
    <el-button
      icon="el-icon-aim"
      style="margin-left: 0;"
      @click="resetToday"
      title="回到今天"
    >
    </el-button>
  </div>
</template>

<script>
import { dateFormatter } from '@/utils/validate'
export default {
  props: {
    curDate: {
      type: String,
      default: dateFormatter(new Date())
    }
  },
  data() {
    return {
      year: '',
      yearoptions: [],
      disabledStartTime: 0,
      disabledEndTime: 0,
      week: '',
      curDay: 1, // 当前周的第几天
      curTime: 1, // 当前时间
      weekDate: [], // 一周的日期
      pickeroptions: {
        firstDayOfWeek: 1,
        disabledDate: (time) => {
          // console.log(time)
          const tt = time.getTime()
          return tt > this.disabledStartTime || tt < this.disabledEndTime
        }
      }
    }
  },
  computed: {
    curDateTemp: {
      get() {
        return this.curDate
      },
      set(val) {
        this.$emit('update:curDate', val)
      }
    }
  },
  watch: {
    curDateTemp(val) {
      if (val) {
        const date = new Date(val)
        this.year = date.getFullYear()
      }
    }
  },
  created() {
    // 得到当前日期
    this.week = new Date(this.curDateTemp)
    this.setYearOptions()
  },
  methods: {
    // 选择年，监听
    yearChange(data) {
      this.week = new Date(data + '-1-1')
      this.curDateTemp = data + '-1-1'
      this.$emit('weekChange', this.curDateTemp)
    },
    // 选择周，监听
    changeWeek(data) {
      // 把当前选择时间赋值给当前暂存时间
      this.curDateTemp = dateFormatter(data)
      // console.log('changeWeek:====', this.curDateTemp)
      // 执行操作
      this.$emit('weekChange', this.curDateTemp)
    },
    // 获取上周一周日期
    getLastWeek() {
      const cDate = dateFormatter(new Date(this.curDateTemp).getTime() - 1000 * 60 * 60 * 24 * 7)
      // 执行操作
      this.week = new Date(cDate)
      this.curDateTemp = cDate
      this.$emit('weekChange', this.curDateTemp)
    },
    // 获取下周一周日期
    getNextWeek() {
      const cDate = dateFormatter(new Date(this.curDateTemp).getTime() + 1000 * 60 * 60 * 24 * 7)

      // 执行操作
      this.week = new Date(cDate)
      this.curDateTemp = cDate
      this.$emit('weekChange', this.curDateTemp)
    },
    // 当天
    resetToday() {
      const cDate = dateFormatter(new Date().getTime())

      // 执行操作
      this.week = new Date(cDate)
      this.curDateTemp = cDate
      this.$emit('weekChange', this.curDateTemp)
    },

    // 设置年选项、时间选择的限制范围
    setYearOptions() {
      let yo = []
      const date = new Date(this.curDateTemp)
      let year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      let strDate = date.getDate() // 日
      yo = [year + 1]
      for (let i = 0; i < 10; i++) {
        yo.push(year - i)
      }
      const endTime = yo[yo.length - 1] + '-' + month + '-' + strDate
      const startTime = yo[0] + '-' + month + '-' + strDate
      this.disabledEndTime = new Date(endTime).getTime()
      this.disabledStartTime = new Date(startTime).getTime()
      this.year = year
      this.yearoptions = yo
    }
  }
}
</script>

<style lang="scss" scoped>
// .week-wrap{
//   margin: 0 5px;
// }
</style>
